/*最外层*/

.yys {
    width: 100%;
    max-width: 1920px;
    min-width: 1280px;
}


/*头部*/

.header {
    position: relative;
    width: 100%;
    height: 55px;
    line-height: 55px;
}

.menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 179px;
    height: 54px;
    background-color: #cf1132;
    font-size: 12px;
    color: #fff;
}

.sale {
    position: absolute;
    top: 0;
    right: 0;
    width: 138px;
    height: 54px;
    border-left: 1px solid #dadada;
    color: #333;
    cursor: pointer;
}

.sale:hover {
    color: #bc2e2e;
    border-bottom: 1px solid #bc2e2e;
    background-color: #f3f3f3;
}


/*banner*/

.banner {
    position: relative;
    top: -10px;
    width: 100%;
    height: 784px;
}

.nav {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: url("../images/nav_back_bg_fd2505e.jpg") no-repeat center top;
    z-index: 999;
}

.nav-wrap {
    position: relative;
    margin: 0 auto;
    width: 1180px;
    height: 70px;
    line-height: 70px;
}

.nav-wrap li {
    position: relative;
    float: left;
    width: 84.28px;
    font-size: 14px;
}

.nav-wrap li:not(.nav-active)::after {
    content: "";
    position: absolute;
    top: 30px;
    right: 0;
    width: 1px;
    height: 10px;
    background-color: #fff;
}

.nav-wrap li:hover::after {
    content: "";
    background-color: transparent;
}

.nav-wrap a {
    color: #fff;
}

.nav-active {
    background: url("../images/nav_bg1_d44f09d.jpg") no-repeat;
}

.nav-active>a {
    color: #000;
}

.nav-wrap li:hover {
    background: url("../images/nav_bg1_d44f09d.jpg") no-repeat;
}

.nav-wrap li:hover>a {
    color: #000;
}


/*放大镜*/

.search {
    position: absolute;
    top: 25px;
    right: -35px;
    width: 18px;
    height: 19px;
    background: url("../images/search_b180dd5.png") no-repeat;
    transition: all 0.3s;
}

.search:hover {
    transform: rotateY(180deg);
}


/*下拉列表*/

.nav-list {
    position: absolute;
    display: none;
    top: 60px;
    left: 0;
    width: 100%;
    height: 140px;
    background: url("../images/subnav_bg_5cc9309.jpg") center 0 no-repeat;
}

.nav:hover>.nav-list {
    display: block;
}

.nav-list img {
    margin: 24px 10px 0;
}

.banner-box {
    position: relative;
    width: 100%;
    height: 784px;
    overflow: hidden;
}

.banner-box>img {
    margin-left: 50%;
    transform: translateX(-50%);
}

.banner-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 287px;
    background: url("../images/bot_head_bg_450ba6b.png") repeat-x center bottom;
}

.banner-logo {
    position: absolute;
    left: 150px;
    top: 143px;
    width: 77px;
    height: 228px;
    background: url("../images/200.webp") no-repeat;
    background-size: 100%;
}

.download {
    position: relative;
    padding-top: 47px;
    width: 145px;
    height: 240px;
    background: url("../images/index_z_8ea32f7.png");
}

.download>img {
    width: 107px;
}

.download>.line {
    position: absolute;
    top: 45px;
    left: 12px;
    width: 120px;
    animation: move 4s linear infinite;
}

@keyframes move {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(100px);
    }
    100% {
        transform: translateY(0);
    }
}


/*主体*/

.wrap {
    margin: 0 auto;
    width: 1180px;
}


/*平安世界*/

.world {
    position: relative;
    margin-top: 43px;
    margin-bottom: 70px;
    width: 100%;
    height: 495px;
    overflow: hidden;
}

.world-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 54px;
    height: 145px;
    background: url("../images/index_z_8ea32f7.png");
    background-position: -940px -532px;
}

.world-img {
    margin-top: 128px;
    width: 1180px;
    height: 320px;
    background: url("../images/shishen_bg_000bc91.jpg") no-repeat center top;
}

.big-img {
    margin: 0 auto;
    width: 940px;
    height: 320px;
}

.big-img>a {
    position: relative;
    float: left;
    width: 470px;
    height: 320px;
}

.big-img img {
    position: absolute;
    top: -186px;
    right: -140px;
}

.big-img .big-img-left {
    position: relative;
    left: -140px;
}


/*游戏攻略*/

.game {
    width: 100%;
    height: 510px;
    background: url("../images/stategy_bg_4def7a7.jpg") no-repeat;
    background-position: 0 174px;
}

.game-tit {
    float: left;
    width: 55px;
    height: 145px;
    background: url("../images/index_z_8ea32f7.png");
    background-position: -876px -532px;
}

.game-box {
    float: right;
    width: 1080px;
    height: 209px;
}

.game-box>div {
    position: relative;
    float: left;
    margin-left: 20px;
    width: 340px;
    height: 209px;
}

.game-box>div:hover span {
    transform: translateY(-10px);
}

.game-box span {
    position: absolute;
    padding: 0 10px;
    width: 40px;
    height: 90px;
    box-sizing: border-box;
    background: url("../images/stategy_tit_bg_3dfaee2.png");
    color: #000;
    font-size: 14px;
    line-height: 18px;
    transition: all .4s;
}

.game-box span:first-of-type {
    top: 0;
    left: 18px;
}

.game-box span:last-of-type {
    top: 22px;
    left: 68px;
}


/*同人手账*/

.tongren {
    margin-bottom: 70px;
    width: 100%;
    height: 487px;
    background: url("./images/tongren_bg_4e00ea2.jpg") no-repeat 0 bottom;
}

.tongren-tit {
    float: left;
    width: 53px;
    height: 144px;
    background: url("./images/index_z_8ea32f7.png");
    background-position: -1003px -532px;
}

.tongren-box {
    float: right;
    width: 1062px;
    height: 456px;
}

.tongren-box-left {
    float: left;
    width: 300px;
    height: 456px;
}

.tongren-box-right {
    float: right;
    width: 720px;
    height: 447px;
}

.tr-img {
    margin-top: 41px;
    width: 300px;
    height: 415px;
    background-image: url("../images/636343c1-1786-41f4-a666-bc70e648b7b3.png");
    animation: change 6s linear infinite;
}

@keyframes change {
    0% {
        background-image: url("../images/636343c1-1786-41f4-a666-bc70e648b7b3.png");
    }
    50% {
        background-image: url("../images/1ecee501-bfd2-46b2-95fc-6cd88c63faa2.png");
    }
    100% {
        background-image: url("../images/48a4f70a-058c-4cbf-84eb-27d09ed50f2a.jpg");
    }
}

.tongren-box-right>div {
    float: left;
    margin-top: 40px;
    margin-left: 20px;
    width: 220px;
    height: 351px;
    background-image: url("../images/cdd1bfc5-5e41-49d9-9b57-1b89016aae74.jpg");
    animation: change1 14s linear infinite;
}

@keyframes change1 {
    0% {
        background-image: url("../images/cdd1bfc5-5e41-49d9-9b57-1b89016aae74.jpg");
    }
    16% {
        background-image: url("../images/9a1e3659-9eca-4c88-aa77-b276372718b6.jpg");
    }
    32% {
        background-image: url("../images/cdd1bfc5-5e41-49d9-9b57-1b89016aae74.jpg");
    }
    48% {
        background-image: url("../images/9a1e3659-9eca-4c88-aa77-b276372718b6.jpg");
    }
    64% {
        background-image: url("../images/cdd1bfc5-5e41-49d9-9b57-1b89016aae74.jpg");
    }
    80% {
        background-image: url("../images/9a1e3659-9eca-4c88-aa77-b276372718b6.jpg");
    }
    100% {
        background-image: url("../images/cdd1bfc5-5e41-49d9-9b57-1b89016aae74.jpg");
    }
}


/*试听盛宴*/

.shiting {
    padding-bottom: 47px;
    width: 100%;
    height: 262px;
}

.shiting-tit {
    float: left;
    width: 55px;
    height: 146px;
    background: url("../images/index_z_8ea32f7.png");
    background-position: -812px -532px;
}

.st-box {
    float: right;
    width: 1090px;
    height: 215px;
    background: url("../images/shiting_bg_735f29c.jpg") no-repeat left 70px;
}

.st-box>div {
    position: relative;
    float: left;
    margin-left: 20px;
    width: 250px;
    height: 141px;
    background-color: gold;
}

.st-box>div:first-child {
    margin-left: 30px;
}

.st-name {
    position: absolute;
    padding: 5px 10px;
    right: -10px;
    bottom: -10px;
    background-color: #000;
    color: #fff;
}


/*泛娱乐*/

.fun {
    margin-bottom: 70px;
    width: 100%;
    height: 516px;
    background: url("../images/fun_bg_99effa1.jpg") no-repeat left 175px;
}

.fun-tit {
    float: left;
    width: 55px;
    height: 140px;
    background: url("../images/index_z_8ea32f7.png");
    background-position: -1067px -532px;
}

.fun-box {
    float: right;
    width: 1060px;
    height: 516px;
}

.fun_con {
    position: relative;
    width: 1060px;
    height: 536px;
    overflow: hidden;
}

.fun-container {
    position: absolute;
    top: 20px;
    left: 0;
    width: 2300px;
    height: 516px;
}

.fun-container>div {
    float: left;
    margin-right: 10px;
    width: 220px;
    height: 516px;
    transition: all 0.4s;
}

.fun-container>div:hover {
    transform: translateY(-20px);
}